<template>
  <el-container v-loading="loading">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" label-position="left" size="small">

<!--      <el-form-item label="订单支付成功通知模板" prop="payment_tpl">-->
<!--        <el-input v-model="ruleForm.payment_tpl"></el-input>-->
<!--        <div class="form-item-tip">-->
<!--          <span>提示：*模板id AT0009 金额、下单时间、订单编号、支付时间、乘客、行程</span>-->
<!--        </div>-->
<!--      </el-form-item>-->

      <el-form-item label="审核结果通知" prop="refund_tpl">
        <el-input v-model="ruleForm.refund_tpl"></el-input>
        <div class="form-item-tip">
          <span>提示:*模板标题(审核结果通知) *关键字:(审核结果、未通过原因、审核人员、处理时间) *服务类目(工具 效率)</span>
        </div>
      </el-form-item>

      <el-form-item label="订单取消通知" prop="cance_tpl">
        <el-input v-model="ruleForm.cance_tpl"></el-input>
        <div class="form-item-tip">
          <span>提示:*模板标题(订单取消通知) *关键字:(下单时间、订单编号、路线、取消人) *服务类目(出行与交通 代驾)</span>
        </div>
      </el-form-item>

      <el-form-item label="接单成功提醒" prop="pick_tpl">
        <el-input v-model="ruleForm.pick_tpl"></el-input>
        <div class="form-item-tip">
          <span>提示:*模板标题(接单成功提醒) *关键字:(订单号、订单状态、接单时间、接单人、路线) *服务类目(出行与交通 代驾)</span>
        </div>
      </el-form-item>

      <el-form-item label="收款成功通知" prop="closed_tpl">
        <el-input v-model="ruleForm.closed_tpl"></el-input>
        <div class="form-item-tip">
          <span>提示:*模板标题(收款成功通知) *关键字:(客户名称、收款金额、收款时间、收款备注) *服务类目(工具 效率)</span>
        </div>
      </el-form-item>

      <el-form-item label="催款通知模板" prop="dept_tpl">
        <el-input v-model="ruleForm.dept_tpl"></el-input>
        <div class="form-item-tip">
          <span>提示:*模板标题(订单待处理通知) *关键字:(订单编号、订单备注、通知时间) *服务类目(工具 效率)</span>
        </div>
      </el-form-item>

		<!-- 	<el-form-item label="司机到达通知模板" prop="arrive_tpl">
			  <el-input v-model="ruleForm.arrive_tpl"></el-input>
			  <div class="form-item-tip">
			    <span>提示：*模板id：AT0507 、司机、到达时间、司机电话、上车地点</span>
			  </div>
			</el-form-item> -->

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即保存</el-button>
        <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
      </el-form-item>
    </el-form>

  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,  // 页面加载
        ruleForm: {
          "payment_tpl":"",                //类型：String  必有字段  备注：支付成功
          "refund_tpl":"",                //类型：String  必有字段  备注：退款模板消息
          "cance_tpl":"",
          "pick_tpl": "",
          "closed_tpl":"",
          "dept_tpl":"",
					"arrive_tpl":""
        },
        rules: {
          // payment_tpl: [
          //   {required: true, message: '支付成功提醒模板必须配置', trigger: 'blur'},
          // ],
          refund_tpl: [
            {required: true, message: '审核成功通知模板必须配置', trigger: 'blur'},
          ],
          cance_tpl: [
            {required: true, message: '取消订单通知模板必须配置', trigger: 'blur'},
          ],
          pick_tpl: [
            {required: true, message: '接单成功通知模板必须配置', trigger: 'blur'},
          ],
          closed_tpl: [
            {required: true, message: '收款通知模板必须配置', trigger: 'blur'},
          ],
          dept_tpl: [
            {required: true, message: '催款通知模板必须配置', trigger: 'blur'},
          ],
        },
      };
    },
    methods: {
      submitForm(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.api.setTempletSetting(_this.ruleForm).then(function (res) {
              if (res.code == 1) {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'success'
                });
              } else {
                _this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'warning'
                });
              }
            }).catch(function (error) {
              throw new Error(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },

    mounted: function () {
      let _this = this;
      this.api.getTempletSetting().then(function (res) {
        if (res.code == 1) {
          _this.ruleForm = res.data;
        }
        _this.loading = false;
      }).catch(function (res) {
        throw new Error(error);
      });
    },
  }
</script>

<style scoped>

  .el-container {
    display: block;
  }

  /* 表单 */
  .el-form {
    width: 1000px;
    margin: 15px 0 15px 30px;
  }

  /* 图片上传 */
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    width: 178px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
